<template>
    <div class="echart" id="mychart2" :style="myChartStyle"></div>
</template>
  
<script>
import * as echarts from "echarts";
import { zhuList } from "@/api/system/index";
export default {
    data() {
        return {
            xData: [1, 2, 3], //横坐标
            yData: [1, 2, 3], //数据
            myChartStyle: { width: "100%", height: "300px" },//图表样式
            a: []
        };
    },
    mounted() {
         this.zhuxingList()
       


    },
    methods: {
        zhuxingList() {
            zhuList().then(response => {
                console.log(response)
                this.xData=response.data.names
            this.yData=response.data.values
            this.initEcharts();
            });
        },
        initEcharts() {
            // 基本柱状图
            const option = {
                xAxis: {
                    data: this.xData
                },
                yAxis: {},
                series: [
                    {
                        type: "bar", //形状为柱状图
                        data: this.yData
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart2"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        }
    }
};
</script>
  
  